<template>
	<view>
		<!-- <view class="nav">
			<u-tabs :current="check - 1" :itemStyle="{ width:'50%',height:'80rpx'}"
				:activeStyle="{ color: '#E84E22' , fontSize:'32rpx' }" lineColor='#E84E22'
				:inactiveStyle="{ color: '#666666',fontSize: '28rpx' }" :list="list1" @click="click"></u-tabs>
		</view> -->
		<view class="liBox">
			<view class="name">
				套餐名称
			</view>
			<view class="stock" v-show="!stockType">
				<view class="stockTxt">
					总库存
				</view>
				<!-- <image class="stockImg" src="../../static/images/work/sequ.png"></image> -->
			</view>
			<view class="stock">
				<view class="stockTxt">
					剩余
				</view>
				<!-- <image class="stockImg" src="../../static/images/work/sequ.png"></image> -->
			</view>
		</view>
		<view class="goodBox">
			<view v-if="stockList.length">
				<view class="goodLi" v-for="stock in stockList" :key="stock.id">
					<view class="goodInfo">
						<!-- <image class="goodImg" :src="stock.picUrl" v-show="stockType"></image> -->
						<view :class="stockType? 'goodName':'goodName2'">
							{{ stock.name }}
						</view>
					</view>
					<view class="allStock" v-show="!stockType">
						{{ stock.totalStock }}
					</view>
					<view class="rduceStock">
						{{ stock.stock }}
					</view>
				</view>
			</view>
			<view class="noList" v-else>
				暂无数据
			</view>
		</view>
		<!-- <view class="bottom" v-if="!stockList.length" @click="toMember">
			购买套餐
		</view> -->
	</view>
</template>

<script>
	import {
		getGoodsStock,
		getPackageStock
	} from '@/api/stock/stock.js'
	export default {
		data() {
			return {
				// list1: [{
				// 	name: '商品库存',
				// 	type: 1
				// }, {
				// 	name: '套餐库存',
				// 	type: 2
				// }],
				check: 1,
				reduceShow: 1,
				stockType: false,
				stockList: [], //订单数据
			}
		},
		methods: {
			// //导航点击
			// async click(item) {
			// 	if (item.type == 1) {
			// 		const {
			// 			data
			// 		} = await getGoodsStock()
			// 		this.stockList = data;
			// 		this.stockType = true
			// 	} else if (item.type == 2) {
			// 		const {
			// 			data
			// 		} = await getPackageStock()
			// 		this.stockList = data;
			// 		this.stockType = false
			// 	}
			// 	console.log(this.stockList)
			// }
			//跳转购买套餐
			// toMember(){
			// 	this.$tab.navigateTo('/pagesA/meal/meal')
			// }
		},
		async mounted() {
			const {
				data
			} = await getPackageStock()
			this.stockList = data;
		}
	}
</script>

<style>
	page {
		background-color: white;
	}

	.nav {
		width: 750rpx;
		height: 100rpx;
		background-color: #F5F5F5;
		position: fixed;
		top: 0;
		z-index: 1;
	}

	.liBox {
		width: 690rpx;
		height: 84rpx;
		background-color: #fff;
		position: fixed;
		top: 10rpx;
		left: 30rpx;
		border-bottom: 2rpx solid #F1F1F1;
		display: flex;
		justify-content: space-between;
		z-index: 1;
	}

	.name {
		width: 340rpx;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		font-size: 24rpx;
		color: #666666;
	}

	.stock {
		width: 170rpx;
		height: 84rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: #666666;
	}

	.stockImg {
		width: 20rpx;
		height: 20rpx;
	}

	.goodBox {
		width: 630rpx;
		height: fit-content;
		margin: 80rpx auto 0 auto;
		padding-bottom: 150rpx;
		/* background-color: red; */
	}

	.goodLi {
		width: 630rpx;
		height: 136rpx;
		border-bottom: 2rpx solid #F1F1F1;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.goodLi:last-child {
		border: none;
	}

	.goodInfo {
		width: 310rpx;
		height: 96rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.goodImg {
		width: 96rpx;
		height: 96rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.goodName2 {
		width: 310rpx;
		max-height: 96rpx;
		line-height: 48rpx;
		text-align: center;
		display: -webkit-box;
		/* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
		-webkit-box-orient: vertical;
		/* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
		text-overflow: ellipsis;
		/* 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.goodName {
		width: 200rpx;
		max-height: 96rpx;
		line-height: 48rpx;
		text-align: center;
		display: -webkit-box;
		/* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
		-webkit-box-orient: vertical;
		/* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
		text-overflow: ellipsis;
		/* 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.allStock {
		width: 130rpx;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		font-size: 24rpx;
		color: #333333;
	}

	.rduceStock {
		width: 130rpx;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		margin-left: 20rpx;
		font-size: 24rpx;
		color: #333333;
	}

	.bottom {
    width: 690rpx;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    font-size: 35rpx;
    background: #E84E22;
    border-radius: 48rpx;
    color: #FFFFFF;
    position: fixed;
    bottom: 60rpx;
    left: 30rpx;
	}
	.noList{
		width: 100%;
		height: 200rpx;
		margin-top: 300rpx;
		font-size: 40rpx;
		color: #666666;
		text-align: center;
		line-height: 200rpx;
	}
</style>